<template>
  <div>
    <div style="height: 150px">
      <el-form ref="form" :model="form" :rules="rules" label-width="130px" size="mini" :inline="true">
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="设计费分摊标识" prop="ifDivideDes" style="width: 100%">
              <el-select v-model="form.ifDivideDes" placeholder="请选择" :disabled="ifDivideDesDisable">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="监理费分摊标识" prop="ifDivideSpv" style="width: 100%">
              <el-select v-model="form.ifDivideSpv" placeholder="请选择" :disabled="ifDivideSpvDisable">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12"><div /></el-col>
          <el-col :span="12">
            <el-form-item label="修改原因" prop="changeReason" style="width: 100%">
              <el-input
                v-model="form.changeReason"
                style="width: 100%"
                type="textarea"
                placeholder="请输入内容"
              />
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
      <div v-if="isSave" style="text-align: center;margin-top: 40px">
        <el-button type="primary" size="small" @click="handleBtn">保存</el-button>
      </div>

    </div>
    <el-table
      :data="tableData"
      max-height="450"
      border
      style="width: 100%;"
    >
      <el-table-column align="center" type="index" label="序号" width="50" fixed />
      <el-table-column
        v-for="item in column"
        :key="item.value"
        :prop="item.value"
        :label="item.label"
        align="center"
        :width="item.width"
        show-overflow-tooltip
        :formatter="formatter"
        fixed
      />
    </el-table>
    <pagination
      :is-popper-body="false"
      :total="total"
      :page.sync="params.pageNum"
      :limit.sync="params.pageSize"
      @pagination="getTable"
    />
  </div>
</template>
<script>
import { getDesOrSpvDivideApi, getDivideChangeApi, insertDivideChangeLogApi } from '@/api/acceptance'

/**
 *
 */
export default {
  name: 'Design',
  props: ['prjId'],
  data() {
    return {
      options: [
        {
          value: '1',
          label: '是'
        },
        {
          value: '0',
          label: '否'
        }
      ],
      form: {
        prjId: this.prjId,
        ifDivideSpv: '',
        ifDivideDes: '',
        ifDivideSpvOld: '',
        ifDivideDesOld: '',
        changeReason: ''
      },
      ifDivideDesDisable: false,
      ifDivideSpvDisable: false,
      isSave: true,
      rules: {},
      params: {
        'prjId': this.prjId,
        'pageNum': 1,
        'pageSize': 10
      },
      tableData: [],
      column: [
        {
          label: '原设计费分摊标识',
          value: 'ifDivideDesOld'
        },
        {
          label: '原监理费分摊标识',
          value: 'ifDivideSpvOld'
        },
        {
          label: '本次设计费分摊标识',
          value: 'ifDivideDes'
        },
        {
          label: '本次监理费分摊标识',
          value: 'ifDivideSpv'
        },
        {
          label: '修改批次号',
          value: 'changeVersion'
        },
        {
          label: '修改原因',
          value: 'changeReason'
        },
        {
          label: '修改时间',
          value: 'updateTime'
        }
      ],
      total: 0
    }
  },
  created() {
    this.getDetail()
    this.getTable()
  },
  methods: {
    formatter(row, { property }, cellValue, index) {
      console.log(property)
      if (['ifDivideDesOld', 'ifDivideSpvOld', 'ifDivideDes', 'ifDivideSpv'].includes(property)) {
        if (+cellValue === 0) {
          return '否'
        } else {
          return '是'
        }
      }
      return cellValue
    },
    async handleBtn() {
      console.log(this.form)
     const result = await insertDivideChangeLogApi(this.form)
      if (+result.code !== 200) {
        return
      }
      this.getDetail()
      this.getTable()
    },
   async getTable() {
      const result = await getDivideChangeApi(this.params)
      this.tableData = result.data.rows
      this.total = result.data.total
    },
    async getDetail() {
      const result = await getDesOrSpvDivideApi({ prjId: this.prjId })
      this.form.ifDivideSpv = result.data.ifDivideSpv
      this.form.ifDivideDes = result.data.ifDivideDes
      this.form.ifDivideSpvOld = result.data.ifDivideSpv
      this.form.ifDivideDesOld = result.data.ifDivideDes
      this.form.changeReason = ''
      if (result.data.desNum == 0 && result.data.ifDivideDes != 1) {
        this.ifDivideDesDisable = false
      } else {
        this.ifDivideDesDisable = true
      }
      if (result.data.spvNum == 0 && result.data.ifDivideSpv != 1) {
        this.ifDivideSpvDisable = false
      } else {
        this.ifDivideSpvDisable = true
      }
      if (result.data.ifDivideDes == 1 && result.data.ifDivideSpv == 1) {
        this.isSave = false
      }
    }
  }
}
</script>

<style scoped lang='scss'>
</style>
